<%--
  Created by IntelliJ IDEA.
  User: sxjzit001
  Date: 2023/5/8
  Time: 17:09
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>注册</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
    <script>
<%--   需要增加一个固定的参数 action=regist --%>

        $(function () {
            let flag = false;
            const baseUrl = "http://localhost:8081/StuManager/"
            $(".submit").click(function () {
                if (!flag){
                    $(".error").html("用户名已存在,请不要注册了").css("color","#f00")
                    return;
                }
                const url = baseUrl+"LoginServlet?action=register"
                const params = "name=" + $(".name").val()+"&psd="+$(".psd").val()+
                    "&email="+$(".email").val()
                // 做数据校验的工作
                let reg = "^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$"
                let regExp = new RegExp(reg);
                let b = regExp.test($(".email").val());
                console.log("==========", b)
                if (!b){
                    return;
                }
                postRequest(url, params, function (jsonData){
                    // 接受服务器端的响应 然后做出相应的处理
                    let data = JSON.parse(jsonData);
                    if (data.code === 20) {
                        // 注册成功 跳转到登录页面 让用户登录
                        window.location = baseUrl+"login.jsp"
                    }else {
                        // 注册失败 显示一个失败ui提醒用户
                        $(".error").html(data.msg).show(500)
                    }
                })
            })

            $(".name").blur(function (){
                // 发起请求 ,校验用户名是否已存在
                const url = baseUrl+"LoginServlet";
                postRequest(url, "name="+$(".name").val()+"&action=verifyUser",function (jsonData) {
                    let data = JSON.parse(jsonData);
                    if (data.code === 10) {
                        // 提醒用户,用户名已存在, 请重新输入
                        $(".error").html(data.msg).show(500)
                        flag = false;
                    }else {
                        flag = true;
                    }
                })
            })
        })

        // ajax 的post请求
        function postRequest(url, params, callBack){
            let xhr = new XMLHttpRequest()
            xhr.open("post", url)
            xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded;charset=utf-8")
            xhr.onreadystatechange = function () {
                if (this.readyState === 4) {
                    if (this.status >= 200 && this.status < 300){
                        let jsonData = this.responseText
                        console.log("服务器的响应: ",jsonData)
                        callBack(jsonData);
                    }
                }
            }
            xhr.send(params)
        }

    </script>
</head>
<body>

<input class="name" placeholder="请输入用户名"/>
<input class="psd" type="password" placeholder="请输入密码"/>
<input class="rePsd" type="password" placeholder="请再次输入密码">
<input class="email" type="text" placeholder="请输入邮箱"/>
<button class="submit">注册</button>
<div class="error"></div>
</body>
</html>
